<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<style>

</style>
<body>
{% include 'component/navbarComponent.html' %}
<div class="container">
    <div class="row">
        {# 生成一个bootstrap3.4.1的巨幕容器#}
        <div class="jumbotron">
            <h1 class="display-4">新疆农作物产量数据分析报告</h1>
            <p class="lead">
                综合新疆地区的年降雨量、机械拥有量、温度、播种面积等因素对新疆地区的农作物产量进行关联分析，得出热力图，从热力图得到各影响因素与农作物产量直接的Preason系数，从而得到两两变量之间的相关性。</p>
            <hr class="my-4">
            <p>注意：本报告基于现有数据生成，仅供参考，具体结果请以实际为准。</p>
            <button class="btn btn-primary btn-lg" role="button" onclick=generateReport()>点击生成报告</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="main" style="width: 100%;height: 600px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div>
                {# 使用bootstrap3.4.1的警告框#}
                <div class="alert alert-warning" role="alert" style="display:none" id="reportAlert">
                    <h4 class="alert-heading">注意</h4>
                    <p>本报告基于现有数据生成，仅供参考，具体结果请以实际为准。</p>
                    <hr>
                    <p class="mb-0">基于以上热力图数据，我们可以得出以下结论：</p>
                    {% for report_result in reports %}
                        <p>{{ report_result }}</p>
                    {% endfor %}


                </div>
            </div>
        </div>

    </div>

</div>

</body>
<script>
    function generateReport() {
        {#    执行heatMap数据处理#}
        heatMap()
        let reportAlert = $('#reportAlert')
        reportAlert.show()
    }

    function heatMap() {
        var heatMapChart = echarts.init(document.getElementById("main"));
        // x轴数据
        var hours = [
            {% for foo in corr_list %}
                "{{ foo.0 }}",
            {% endfor %}
        ];

        // y轴数据
        var days = [
            {% for foo in corr_list %}
                "{{ foo.1 }}",
            {% endfor %}
        ];

        /*
        数据解释：
        [y轴，x轴，value]（注意第一个是y，第二个才是x！！！）
        例如[0,1,1]表示坐标为(1,0)的点的值为1
        因为y轴为一周，所以如果按天分，数据可以分为六行
        x轴为一天，按小时分，可以分为24个小时
        如下所示
         */
        {#保存为两位小数#}

        var data = [
            {% for foo in corr_list %}
                ['{{ foo.1 }}', '{{ foo.0 }}', {{ foo.2|floatformat:"2" }}],
            {% endfor %}
        ]

        data = data.map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });

        var option = {
            // 移到每个值上的文本提示框
            tooltip: {
                position: 'top'
            },
            // 关闭动画
            animation: true,
            // 直角坐标系内绘图网格
            grid: {
                height: '50%',
                top: '10%'
            },
            xAxis: {
                // 坐标轴类型，（value数值轴,category类目轴,time时间轴,log对数轴）
                type: 'category',
                data: hours,
                // 分隔区域
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: days,
                rotate: -72,
                splitArea: {
                    show: true
                }
            },
            // 视觉映射组件
            visualMap: {
                min: 0,
                max: 10,
                // grid 区域包含坐标轴的刻度标签
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
            },
            series: [{
                name: 'Punch Card',
                type: 'heatmap',
                data: data,
                label: {
                    show: true
                },
                // 当鼠标移到某个值上强调显示的格式（通过visualMap可以明显的看出这个效果）
                emphasis: {
                    itemStyle: {
                        // 图形阴影的模糊大小
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        heatMapChart.setOption(option);
    }

</script>
{#引入echarts.js#}
{#引入bootstrap3.4.1的js#}


</html>